<template>
  <div class="app-container">
    <div class="filter-container">
      <el-date-picker
        v-model="times"
        class="filter-item"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 250px;"
        type="daterange"
        value-format="yyyy-MM-dd"
      />
      <el-select
        v-model="listQuery.channelId"
        filterable
        clearable
        :filter-method="appdataFilter"
        placeholder="选择渠道"
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >
        <el-option
          v-for="item in selectArr"
          :key="item.channelId"
          :label="item.channel_name"
          :value="item.channelId"
        />
      </el-select>
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button>
    </div>
    <el-table
      :data="authData"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column prop="channelId" label="渠道ID" align="center">
      </el-table-column>
      <el-table-column prop="nickname" label="渠道" align="center">
      </el-table-column>
      <el-table-column prop="channelUv" label="UV" align="center">
      </el-table-column>
      <el-table-column prop="registerNum" label="注册量" align="center">
      </el-table-column>
      <el-table-column prop="registerRate" label="注册率" align="center">
      </el-table-column>
      <el-table-column prop="finishedQuantity" label="完件量" align="center">
      </el-table-column>
      <el-table-column
        prop="registerFinishedRate"
        label="注册完件率"
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column prop="uvFinishedRate" label="uv完件率" align="center">
      </el-table-column>
      <el-table-column prop="costConsumption" label="成本消耗" align="center">
      </el-table-column>
      <el-table-column
        prop="insuranceIncomeNum"
        label="机构进件量"
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="completionRate"
        label="完件进件率"
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="insuranceRevenue"
        label="机构营收"
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="apisuccessNum"
        label="API成功量"
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="apisuccessRate"
        label="API成功率"
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="apirevenue"
        label="API 营收"
        align="center"
        min-width="100"
      >
      </el-table-column>

      <el-table-column
        prop="appShopUV"
        label="贷超唯一访问量"
        align="center"
        min-width="120"
      >
      </el-table-column>
      <el-table-column
        prop="appShopRevenue"
        label="贷超营收"
        align="center"
        min-width="100"
      >
      </el-table-column>
      <el-table-column
        prop="roi"
        label="整体ROI"
        align="center"
        min-width="100"
      >
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getstatisticalROI"
    />
  </div>
</template>
<script>
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
import { getstatisticalROI } from '@/api/auth';
import { getChannelIdAndNick } from '@/api/user';
import { timestampToTimeYear } from '@/utils/index';
export default {
  name: 'ChannelRevenue',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      total: 0,
      authData: [],
      listQuery: {
        current: 1,
        size: 10,
        startTime: '',
        endTime: '',
        channelId: ''
      },
      formLabelWidth: 100,
      selectArr: [],
      times: [],
      timeNow: [
        new Date(new Date().toLocaleDateString()).getTime(),
        new Date(new Date().toLocaleDateString()).getTime() +
          24 * 60 * 60 * 1000
      ]
    };
  },
  created() {
    this.times = [
      timestampToTimeYear(this.timeNow[0]),
      timestampToTimeYear(this.timeNow[1])
    ];
    this.listQuery.endTime = this.times[1];
    this.listQuery.startTime = this.times[0];
    this.getChannelIdAndNick();
    this.getstatisticalROI();
  },
  methods: {
    // 获取渠道来源列表数据
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery);
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.selectArr.push(element);
        }
      });
    },
    async getstatisticalROI() {
      if (this.times == null || this.times.length === 0) {
        this.listQuery.endTime = '';
        this.listQuery.startTime = '';
      } else {
        this.listQuery.endTime = this.times[1];
        this.listQuery.startTime = this.times[0];
      }
      const res = await getstatisticalROI(this.listQuery);
      this.authData = res.data.data.records;
      this.total = res.data.data.total;
    },
    handleFilter() {
      this.listQuery.current = 1;
      this.getstatisticalROI();
    },
    // 四舍五入
    roundNumber(number, decimalPlaces) {
      return Number(number).toFixed(decimalPlaces);
    }
  }
};
</script>
